<template>
	<div>
		<div class="title">周末去哪儿</div>
		<ul>
			<li class="item border-bottom" v-for="item of weekendList" :key="item.id">
				<div class="item-img-wrapper">
				<img class="item-img" :src="item.imgUrl" />
				</div>
				<div class="item-info">
					<p class="item-title">{{item.title}}</p>
					<p class="item-desc">{{item.desc}}</p>
					<!-- <button class="item-button">查看详情</button> -->
				</div>
			</li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>

		</ul>

	</div>
</template>

<script>
	export default {
		name: 'HomeWeekend',
		props:{
			'weekendList':Array
		},
		data() {
			return{
			// weekendList: [{
			// 		id: '0001',
			// 		imgUrl: 'http://img1.qunarzz.com/sight/source/1811/6d/5afbf529076ef6.jpg_r_640x214_7414b151.jpg',
			// 		title: '三峡人家',
			// 		desc: '感受长江的水三峡的情怀，自古至今，无数骚人墨客浓墨重彩的描绘三峡，赶紧领略三峡的壮美吧！'
			// 	},
			// 	{
			// 		id: '0002',
			// 		imgUrl: 'http://img1.qunarzz.com/sight/source/1505/fe/2533da6335a59d.jpg_r_640x214_9fb62f4b.jpg',
			// 		title: '武汉踏青赏花胜地',
			// 		desc: '人间四月芳菲尽，武汉踏青赏花正当时'
			// 	},
			// 	{
			// 		id: '0003',
			// 		imgUrl: 'http://img1.qunarzz.com/sight/source/1505/3a/f96e254541abb.jpg_r_640x214_6b1fc9f0.jpg',
			// 		title: '鄂西旅游圈',
			// 		desc: '感受鄂西旖旎风光，土苗民族淳朴风情,恩施大峡谷里的一山有四季，十里不同天的奇观'
			// 	},
			// 	{
			// 		id: '0004',
			// 		imgUrl: 'http://img1.qunarzz.com/sight/source/1811/8c/80108ae993d1e3.jpg_r_640x214_89628567.jpg',
			// 		title: '追溯山水',
			// 		desc: '美得令人窒息的峡谷，这里的景观雄奇秀美'
			// 	}
			// ]
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~@/assets/styles/mixins.styl'

	.title {
		line-height: 20px;
		// border: 1px red solid;
		background: #eee;
		margin-top: 5px;
		text-indent: .2rem;
	}

	// .item {
	// 	overflow: hidden;
	// 	display: flex;
	// 	height: 100px;
	// }
	
	.item-img-wrapper{
		
	}

	.item-img {
		width: 100%;
		// height: 100px;
		// padding: 5px;
	}

	.item-info {
		// background:red;
		flex: 1;
		padding: 5px;
		min-width: 0;
	}

	.item-title {
		margin-top: -10px;
		line-height: 40px;
		ellipsis();
	}

	.item-desc {
		margin-top: -10px;
		line-height: 30px;
		color: #ccc;
		// overflow: hidden;
  //       text-overflow: ellipsis;
  //       white-space: nowrap; 
		ellipsis();
	}

	.item-button {
		background: #ff9300;
		padding: 3px;
		border-radius: 10px;
		color: #fff;
		width:80px;
		height: 25px;
		line-height: 18px;
	}
</style>
